const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/client/index.jsx'),
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),
        // publicPath: '/public/'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ['@babel/preset-react'],
                    plugins: [
                        ['import', {'libraryName': 'antd', 'style': 'css'}]
                    ]
                }
            },
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg)$/,
                loader: ['file-loader']
            },
            {
              test: /\.scss$/,
              use: ['style-loader','css-loader','sass-loader'],
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.jpg', '.png']
    },
    plugins: [
        new HtmlPlugin({
            template: path.join(__dirname, 'src/client/index.html'),
            favicon: path.resolve('./TF5.ico')
        })
    ],
    devServer: {
        hot: true,
        port: '5000',
        overlay: true,
        historyApiFallback: true
    }
}